<template>


  <el-dialog
      v-model="dialogVisible"
      title="新增变量"
      width="30%"
      :before-close="handleClose"
  >
    <p>流程名</p>
    <el-input v-model="formVariable.name" placeholder="请输入流程名" />

    <p>流程内容</p>
    <el-input v-model="formVariable.value" placeholder="请输入要执行的内容" />
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="insertVariable()">
          确认
        </el-button>
      </span>
    </template>
  </el-dialog>
  <el-drawer
      ref="drawerRef"
      v-model="propIssue.dialogVisible"
      title="流程变量"
      :before-close="handleClose"
      direction="rtl"
      custom-class="demo-drawer"
  >
    <div class="divM">
      <el-button type="success"   @click="dialogVisible = true ">新增流程变量</el-button>
    </div>
    <div class="divM">
      <el-table :data="formdata" border style="width: 100%">
        <el-table-column prop="name" label="Date" />
        <el-table-column prop="value" label="Name"  />
      </el-table>
    </div>
   <div class="divM">
     <div class="demo-drawer__content">

       <div class="demo-drawer__footer">
         <el-button @click="cancelForm">取消</el-button>
         <el-button type="primary" :loading="loading" @click="onClick">{{
             loading ? 'Submitting ...' : '确定'
           }}</el-button>
       </div>
     </div>
   </div>

  </el-drawer>
</template>

<script lang="ts" setup>
import {reactive, ref, toRefs, watch} from 'vue'
import { ElDrawer, ElMessageBox } from 'element-plus'
import axios from "axios";
const formLabelWidth = '80px'
let timer
const dialogVisible = ref(false)
const formdata = ref([])
const formVariable = reactive({
    name :"",
    value:""
})
//获取父组件的数据
const props =defineProps({
  drawerLssue: {
    type: Object,
    default: "",
  },
});
const propIssue =  ref({
  dialogVisible: false ,
})
const propsData = toRefs(props)
const emits = defineEmits(['update:drawerLssue']) // 此处需写'update'
//把监听父组件的值赋值给子组件的新值
watch(propsData.drawerLssue, (val, old) => {
  propIssue.value = val
})
//然后在监听子组件的新值
watch(propIssue, (val, old) => {
  emits('update:drawerLssue', val) // 此处的update亦要写
})
const dialog = ref(false)
/**
 * 新增流程变量
 */
const insertVariable = ()=>{
  dialogVisible.value = false
  formdata.value.push(JSON.parse(JSON.stringify(formVariable)))
  formVariable.name =null;
  formVariable.value = null;
}
const form = reactive({
  name: '',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
})

var map = ref([])

const drawerRef = ref<InstanceType<typeof ElDrawer>>()
//提交
const onClick = () => {
  drawerRef.value!.close()
  const url =  "http://localhost:9899/issue/saveIssue";
  const data = new FormData();
  data.append("id",propIssue.value.data.id)
  var ob = {};
  map.value = [];
  formdata.value.forEach((e)=>{
    ob[e.name] = e.value;
  })
  map.value.push(ob);

  data.append("visible",JSON.stringify(map.value[0]))
  console.log(map,"gg")
  // console.log(formdata.value[0].name,"fggg")
  // const fz  = formdata.value[0].name
  // const dag =  {
  //   fz:formdata.value[0].value
  // }
  // axios.post(url,data).then((
  //     ref
  // )=>{
  //   console.log(ref.data.data)
  // })
  axios(
      {
        headers:{

          "Content-Type":"application/json"

        },
        method:'post',
        url: url,
        data : data,
      }
  ).then(res => res)
}




</script>
<style>
.dialog-footer button:first-child {
  margin-right: 10px;
}
.divM{
  margin: 5px;
}
</style>